<template>
  <div class="introduction">
    <el-select
      class="in-select"
      style="width: 97%"
      v-model="value"
      popper-class="in-list"
      @change="change"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="in-Title">
      <div class="titlecolor"></div>
      <div class="it">
        <h1 class="intitle">{{ title }}</h1>
      </div>
    </div>
    <template v-if="show == 1">
      <div
        class="introduction-content"
        v-for="{ id, title } in introduction"
        :key="id"
      >
        <h2 class="introduction-Title">{{ title }}</h2>
        <p v-html="incontent" class="introduction-content-p"></p>
      </div>
    </template>
    <template v-else-if="show == 2">
      <div class="history-content" v-for="{ id, title } in history" :key="id">
        <h2 class="introduction-Title">{{ title }}</h2>
        <p v-html="hicontent" class="history-content-p"></p>
      </div>
    </template>
    <template v-else-if="show == 3">
      <div
        class="introduction-content"
        v-for="{ id } in schoolspirit"
        :key="id"
      >
        <p v-html="schoolcontent" class="schoolspirit-content-p"></p>
      </div>
    </template>
    <template v-else-if="show == 4">
      <div
        class="introduction-content"
        v-for="{ id, title } in leader"
        :key="id"
      >
        <h2 class="introduction-Title">{{ title }}</h2>
        <p v-html="lecontent" class="schoolspirit-content-p"></p>
      </div>
    </template>
    <template v-else-if="show == 5">
      <div
        class="introduction-content"
        v-for="{ id, title } in scenery"
        :key="id"
      >
        <h2 class="introduction-Title">{{ title }}</h2>
        <p v-html="sccontent" class="scenery-content-p"></p>
      </div>
    </template>
    <template v-else-if="show == 6">
      <div class="introduction-content" v-for="{ id, title } in map" :key="id">
        <h2 class="introduction-Title">{{ title }}</h2>
        <p v-html="mapcontent" class="campus-content-p"></p>
        <template>
          <!-- baidu-map指的既是BaiduMap组件 -->
          <baidu-map
            class="map"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="handler"
          ></baidu-map>
        </template>
      </div>
    </template>
    <template v-else>
      <li class="list-item">请求错误</li>
    </template>
  </div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import {
  introduction,
  history,
  schoolspirit,
  leader,
  scenery,
  map,
} from "@/api";
export default {
  name: "Introduction",
  components: { BaiduMap },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "学院简介",
        },
        {
          value: "2",
          label: "历史沿革",
        },
        {
          value: "3",
          label: "校风校训",
        },
        {
          value: "4",
          label: "现任领导",
        },
        {
          value: "5",
          label: "校园风光",
        },
        {
          value: "6",
          label: "校园鸟瞰图",
        },
      ],
      value: this.$route.query.key,
      title: this.$route.query.key,
      introduction: [],
      history: [],
      schoolspirit: [],
      leader: [],
      scenery: [],
      map: [],
      incontent: "",
      hicontent: "",
      schoolcontent: "",
      lecontent: "",
      sccontent: "",
      mapcontent: "",
      show: this.$route.query.show,
      center: { lng: 0, lat: 0 }, //经纬度
      zoom: 3, //地图展示级别
    };
  },
  mounted() {
    this.$emit("indestroy1", false);
  },
  watch: {
    $route(to, from) {
      this.show = to.query.show;
      this.title = to.query.key;
      this.value = to.query.key;
    },
  },
  beforeDestroy() {
    this.$emit("indestroy", true);
  },
  created() {
    introduction().then((res) => {
      const introduction = res.data;
      this.introduction = introduction;
      this.incontent = introduction[0].content;
    });
    history().then((res) => {
      const history = res.data;
      this.history = history;
      this.hicontent = history[0].content;
    });
    schoolspirit().then((res) => {
      const schoolspirit = res.data;
      this.schoolspirit = schoolspirit;
      this.schoolcontent = schoolspirit[0].content;
    });
    leader().then((res) => {
      const leader = res.data;
      this.leader = leader;
      this.lecontent = leader[0].content;
    });
    scenery().then((res) => {
      const scenery = res.data;
      this.scenery = scenery;
      this.sccontent = scenery[0].content;
    });
    map().then((res) => {
      const map = res.data;
      this.map = map;
      this.mapcontent = map[0].content;
    });
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 119.559;
      this.center.lat = 35.461;
      this.zoom = 16;
    },
    change(value) {
      let obj = {};
      obj = this.options.find((item) => {
        return item.value === value;
      });
      this.value = obj.label;
      this.title = this.value;
      this.$router.replace({
        query: { key: this.title, show: obj.value },
      });
    },
  },
};
</script>
<style>
.introduction {
  background: white;
  padding: 0.2rem;
}
.in-Title {
  width: 96%;
  border-bottom: 1px solid #084fb0;
  margin: 0.2rem;
}
.it {
  display: inline-block;
}
.intitle {
  font-size: 0.8rem;
  padding: 0.2rem;
  color: #084fb0;
  font-weight: normal;
}
.in-select .el-input__inner {
  text-align: center;
  background: #084fb0;
  color: white;
  height: 1.5rem;
  font-size: 0.72rem;
}
.in-list {
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
}
.in-list .el-select-dropdown__item {
  color: white;
  border-bottom: 1px solid #868686;
  font-size: 0.6rem !important;
  height: auto !important;
  line-height: 1.5rem !important;
}
.in-list .el-select-dropdown__item:last-child {
  border-bottom: 0;
}
.in-list .el-select-dropdown__item.hover {
  background-color: rgba(0, 0, 0, 0.75);
}
.introduction-Title {
  font-size: 0.8rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 0.96rem;
}
.introduction-content-p p {
  font-size: 0.56rem;
  line-height: 0.84rem;
}
.introduction-content-p strong {
  font-size: 0.56rem;
  line-height: 0.84rem;
}
.introduction-content {
  padding: 0 2% 1.12rem 2%;
}
.history-content-p img {
  max-width: 100%;
}
.schoolspirit-content-p img {
  max-width: 100%;
  border: 1px solid #ccc;
}
.schoolspirit-content-p h3 {
  font-weight: normal;
  font-size: 0.8rem;
  margin-bottom: 0.96rem;
}
.schoolspirit-content-p {
  font-size: 0.56rem;
}
.scenery-content-p img {
  width: 48% !important;
  border: 1px solid #ccc;
}
.scenery-content-p img:nth-child(2n) {
  margin-left: 0.24rem;
}
.campus-content-p p {
  font-size: 0.56rem;
  line-height: 1.5rem !important;
}
.campus-content-p img {
  max-width: 100%;
  border: 1px solid #ccc;
}
.campus-content-p p span {
  font-size: 0.56rem !important;
  line-height: 1.5rem !important;
}
.campus-content-p h2 {
  font-size: 0.88rem;
}
.map {
  width: 100%;
  height: 12rem; /*//必须给容器指高度，要不然地图将显示在一个高度为0的容器中，自然看不到 */
}
.anchorBL {
  /*//隐藏左下角百度地图logo */
  display: none;
}
</style>
